<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>初始化脚手架</title>
    <link rel="stylesheet" type="text/css" href="css/ali-icon/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="css/aui.2.0.css" />
    <style>
        [v-cloak] {
            display: none;
        }
        .disnone{
            display: none;
        }
        .disblock{
            display: block;
        }
    </style>
</head>
<body>
    <div id="app">
        <header class="aui-bar aui-bar-nav disnone"   :data-id="index"
                v-for="(vo,index) in list" v-bind:class="{'disblock': cou_index== index}">
            {{vo.title}}
        </header>


        <footer class="aui-bar aui-bar-tab" id="footer">
            <div class="aui-bar-tab-item" tapmode v-for="(vo,index) in list" v-bind:class="{'aui-active': cou_index == index}" @click="change_menu(index)">
                <i class="iconfont icon-home7" v-if="index == 0"></i>
                <i class="iconfont icon-fenlei" v-if="index == 1"></i>
                <i class="iconfont icon-gouwuche" v-if="index == 2"></i>
                <i class="iconfont icon-wode" v-if="index == 3"></i>
                <div class="aui-bar-tab-label">{{vo.title}}</div>
            </div>
        </footer>
    </div>

</body>
<script type="text/javascript" src="./script/api.js"></script>
<script type="text/javascript" src="./script/vue.js"></script>
</html>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            cou_index: 0,//显示当前索引
            list:[
                {title:'首页'},
                {title:'分类'},
                {title:'购物车'},
                {title:'我的'}
            ]
        },
        methods: {
            init: function () {
                api.openFrameGroup({
                    name: 'IndexGroup',//app首页frame组预加载
                    background: 'bgcolor',
                    scrollEnabled: true,
                    rect: {
                        x: 0,
                        y: $api.dom('header').offsetHeight,
                        w: api.winWidth,
                        h: api.winHeight - $api.dom('header').offsetHeight - $api.dom('footer').offsetHeight
                    },
                    index: vm.cou_index,
                    frames: [
                        {
                            name: 'index0',
                            url: './html/index0.html',
                            bgColor: 'bgcolor',
                            bounces: true
                        },
                        {
                            name: 'index1',
                            url: './html/index1.html',
                            bgColor: 'bgcolor',
                            bounces: true
                        },
                        {
                            name: 'index2',
                            url: './html/index2.html',
                            bgColor: 'bgcolor',
                            bounces: true
                        },
                        {
                            name: 'index3',
                            url: './html/index3.html',
                            bgColor: 'bgcolor',
                            bounces: true
                        },
                    ]
                }, function (ret, err) {


                });
            },
            change_menu:function (index) {
                if(vm.cou_index == index){
                    return false;
                }
                //切换菜单
                vm.cou_index = index;
                api.setFrameGroupIndex({
                    name: 'IndexGroup',
                    index: index
                });
            }
        }
    });
    apiready = function () {
        var headerlist = $api.domAll('header');
        for(var i=0;i<headerlist.length;i++){
            $api.fixIos7Bar(headerlist[i]);//修复ios系统bar
        }
        vm.init();
    };
</script>